import React, { Component } from 'react'
import { Menu } from 'antd';
import {
    SmileFilled,
    HomeFilled,
    TagFilled,
    TagsFilled,
    InfoCircleFilled
} from '@ant-design/icons';
import { RouteComponentProps, Link, withRouter } from 'react-router-dom';
import ArticleCate from '../../types/ArticleCate';

const { SubMenu } = Menu;

interface IProps extends RouteComponentProps {
    cates: ArticleCate[];
}
class HeaderView extends Component<IProps> {

    render() {
        return (
            <Menu selectedKeys={[this.props.location.pathname]} mode="horizontal">
                <Menu.Item key="/" icon={<HomeFilled />}>
                    <Link to='/'>首页</Link>
                </Menu.Item>

                <SubMenu key="blog" icon={<TagsFilled />} title="分类">
                    {this.props.cates.map(eachCate => (
                        <Menu.Item key={`/cate/${eachCate.cateID}`} icon={<TagFilled />} >
                            <Link to={`/cate/${eachCate.cateID}`}>{eachCate.cateName}</Link>
                        </Menu.Item>
                    ))}

                </SubMenu>
                <Menu.Item key="/spray" icon={<SmileFilled />}>
                    <Link to='/spray'>心情</Link>
                </Menu.Item>
                <Menu.Item key="/about" icon={<InfoCircleFilled />}>
                    <Link to='/about'>关于</Link>
                </Menu.Item>
            </Menu>
        )
    }
}

export default withRouter(HeaderView);